<template>
	<view class="registe">
		<!-- logo -->
		<view class="u-m-t-60 u-m-l-60">
			<u-image border-radius="16" :src="logo || 'https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/12/17/6e0adaf38bc74aa6825fe711d1dff582.jpg'" width="200" height="200"></u-image>
		</view>
		<view class="registeForm u-p-t-50">
			<view class="formItem flex alignCenter justConBetween">
				<image src="@/static/image/icons/tel2.png" mode="widthFix"></image>
				<input class="font14" type="number" v-model.trim="verForm.phoneNumber" maxlength="11" placeholder="请输入手机号">
				<uni-icons class="clear" type="clear" color="#ccc" size="18" @click="verForm.phoneNumber=''"
					v-if="verForm.phoneNumber"></uni-icons>
			</view>
			<view class="formItem flex alignCenter justConBetween">
				<image src="@/static/image/icons/ver.png" mode="widthFix"></image>
				<input class="font14" type="number" v-model.trim="verForm.verificationCode" maxlength="6" placeholder="请输入验证码">
				<uni-downtime class="verify font14" :tel="verForm.phoneNumber" :msgType="'REGISTER'"></uni-downtime>
			</view>
			<view class="formItem flex alignCenter justConBetween">
				<image src="@/static/image/icons/pass.png" mode="widthFix"></image>
				<input class="font14" type="text" v-if="showPass" v-model.trim="verForm.password" maxlength="20"
					placeholder="请输入密码">
				<input class="font14" password v-if="!showPass" v-model.trim="verForm.password" maxlength="20"
					placeholder="请输入密码">
				<uni-icons v-if="showPass" class="inputIcon" type="eye" size="18" @click="showPass=false"></uni-icons>
				<uni-icons v-if="!showPass" class="inputIcon" type="eye-slash" size="18" @click="showPass=true"></uni-icons>
			</view>
			<view class="tip font12 color999">密码必须包含大小写字母以及数字，长度在6-20位</view>
			<view class="noWidthBtn" @click="loginClick">注册</view>
			<!-- 公共操作 -->
			<view class="three">
				<view class="font12 agreement flex alignCenter">
					<view class="u-font-28 color333 flex align-center justify-center" @click="agreeClick">
						<checkbox :checked="agree" class="agreeCheck" style="transform:scale(0.8)" />
						我已知晓并同意
						<text class="text-main-color" @click.stop="toService('service')">《用户协议》</text>
						和
						<text class="text-main-color" @click.stop="toService('personal')">《隐私协议》</text>
					</view>
				</view>
				<view class="u-font-28 accountLogin ">
					<view class="color666">已有账号？<text class="herf-color" @click="toLogin">去登录</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mobile,
		password
	} from "@/utils/verification.js"
	import {
		newRegister
	} from "@/api/login.js"
	import {
		getWxCode
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				verForm: {
					registerType: 'PHONE_NO',
					appType: '',
					phoneNumber: '',
					password: '',
					verificationCode: '',
					invitationCode: ''
				},
				showPass: false,
				agree: false,
				wxCode: '',
				mineProgramTitle: "",
				mineProgramSubTitle: "",
				logo: "",
			}
		},
		onShow() {
			if (uni.getStorageSync('mineProgramSys')) {
				let obj = JSON.parse(uni.getStorageSync('mineProgramSys'));
				this.mineProgramTitle = obj.mineProgramTitle;
				this.mineProgramSubTitle = obj.mineProgramSubTitle;
				this.logo = obj.logo;
			}
		},
		methods: {
			agreeClick() {
				this.agree = !this.agree
			},
			toService(type) {
				uni.navigateTo({
					url: '/pages/service/service?type=' + type
				})
			},
			// 注册点击事件
			loginClick() {
				if (!(mobile.test(this.verForm.phoneNumber))) {
					uni.showToast({
						icon: 'none',
						title: '请填写标准手机号'
					})
					return
				}
				if (!this.verForm.verificationCode) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return
				} else if (!(password.test(this.verForm.password))) {
					uni.showToast({
						icon: 'none',
						title: '请填写密码（密码必须包含大小写以及数字，长度在6-20位）'
					})
					return
				} else if (!this.agree) {
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意相关政策'
					})
					return
				} else {
					// #ifdef MP
					getWxCode().then((code) => {
						console.error('code===', code)
						this.wxCode = code
						this.registeApi()
					})
					// #endif
					// #ifndef MP
					this.registeApi()
					// #endif
				}
			},
			// 调用注册API
			registeApi() {
				// #ifdef APP-PLUS
				this.verForm.appType = uni.getStorageSync('systemInfo').osName == 'ios' ? 3 : 2
				// #endif
				// #ifdef MP
				this.verForm.wechatCode = this.wxCode
				this.verForm.appType = 1
				// #endif
				// 若是通过扫校园推广者的分享码进入的需要绑定二者之间的关系
				if (uni.getStorageSync('shareUserId')) {
					this.verForm.u = uni.getStorageSync('shareUserId')
				}
				console.error('注册', this.verForm)
				newRegister(this.verForm).then((res) => {
					if (res.code == 100000) {
						// 登录成功后将校园推广者的userId清除
						uni.removeStorageSync('shareUserId')
						uni.setStorageSync('token', res.data.access_token)
						uni.setStorageSync('userId', res.data.userId)
						// #ifdef APP-PLUS
						plus.runtime.agreePrivacy();
						// #endif
						if (uni.getStorageSync('prePath')) {
							// 跳转回之前进入的页面
							let url = uni.getStorageSync('prePath')
							uni.removeStorageSync('prePath')
							if (url.indexOf('index/index') != -1 || url.indexOf('schoolMain/schoolMain') != -1 || url.indexOf(
									'major/major') != -1 || url.indexOf('mineMain/mineMain') != -1) {
								uni.switchTab({
									url: url
								})
							} else {
								uni.redirectTo({
									url: url
								})
							}
						} else {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				}).catch((err) => {})

			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/public.scss";

	.registe {
		// padding: 100rpx 80rpx 0;
		box-sizing: border-box;

		.loginDef {
			text-align: right;
			padding: 0 30rpx 0; //48rpx 0 0;
			overflow: hidden;
			box-sizing: border-box;
			image {
				width: 100%;
				height: 100%;
				display: block;
				margin: 0 auto;
			}
		}

		.registeForm {
			padding: 0 66rpx;
			box-sizing: border-box;

			.title {
				margin: 48rpx 0 32rpx;
				font-size: 40rpx;
				font-weight: 600;
			}

			.formItem {
				margin: 30rpx 0 0;
				position: relative;
				padding: 0 0 8rpx;
				border-bottom: 1px solid $bordercolor;

				image {
					width: 48rpx;
					height: 48rpx;
					margin: 0 12rpx 0 0;
				}

				.inputIcon {
					position: absolute;
					right: 20rpx;
					top: 0;
					bottom: 0;
					line-height: 80rpx;
					color: $colorccc !important;
				}

				.verify {
					color: $colorMain !important;
					z-index: 10;
				}
			}

			input {
				height: 100%;
				height: 80rpx;
				line-height: 80rpx;
				flex: 1;
			}

			.tip {
				margin: 15rpx 0 0;
			}
		}

		.accountLogin {
			text-align: center;
			margin-top: 40rpx;
		}

		.noWidthBtn {
			height: 86rpx;
			line-height: 86rpx;
			border-radius: 15rpx;
			margin: 100rpx 0 48rpx;
		}
		.three{
			position: fixed;
			bottom: 10vh;
			left: 50%;
			transform: translate(-50%);
			width: 100%;
		}
		.agreement {

			::v-deep .uni-checkbox-input {
				color: $colorMain !important;
			}

			::v-deep .uni-checkbox-input:hover {
				border-color: $colorMain !important;
				;
			}

			&>view {
				margin: 0 auto;
			}
		}
	}
</style>